import React, { Component, useState } from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  Alert,
  Switch,
  ActivityIndicator,
  Platform,
  Image,
  Dimensions,
  TextInput,
} from 'react-native'

export default function index() {

  const [account, setAccount] = useState()
  const [password, setPassword] = useState()
  const [phone, setPhone] = useState()
  const [remark, setRemark] = useState()

  const handleSaveClick = (e) => {
    const json = {
      account,
      password,
      phone,
      remark,
    }
    console.log('handleSaveClick :: json ->', json)
    alert('录入成功 ~')
  }

  return (
    <View style={[styles.container]}>
      <TextInput
        style={[styles.input]}
        value={account}
        placeholder="请输入账号"
        onChangeText={(val) => {
          setAccount(val)
        }}
      />

      <TextInput
        style={[styles.input]}
        value={password}
        secureTextEntry={true}
        placeholder="请输入密码"
        onChangeText={(val) => {
          setPassword(val)
        }}
      />

      <TextInput
        style={[styles.input]}
        value={phone}
        keyboardType={'number-pad'}
        placeholder="请输入手机号"
        onChangeText={(val) => {
          setPhone(val)
        }}
      />

      <TextInput
        style={[styles.input]}
        value={remark}
        placeholder="备注"
        multiline={true}
        numberOfLines={5}
        textAlignVertical='top'
        onChangeText={(val) => {
          setRemark(val)
        }}
      />

      <View style={[styles.submitContainer]}>
        <Button
          style={[styles.submit]}
          title="录入系统"
          onPress={handleSaveClick}
        />
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  input: {
    margin: 10,
    borderWidth: 1,
    borderColor: '#aaa',
    borderRadius: 3,
    marginBottom: 10,
  },
  submitContainer: {
    height: 50,
    marginLeft: 10,
    marginRight: 10,
  },
  submit: {
    height: 50,
    margin: 10,
    borderRadius: 3,
  }
})
